<template>
  <div>
    <h3>我的发帖</h3>

    <div>
      <div class="postm">
        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
          "
          v-for="artcle in articleList" :key="articleList.postId"
        >
       
          <div class="postPhoto">
            <div>
              <img
                src="https://s1.ax1x.com/2022/07/14/jWxOqP.md.png"
                style="width: 108px; height: 81px"
                alt="jWxOqP.png"
              />
            </div>
          </div>
  
          <div class="postInfo" @click="toDetail(artcle.postId)">
            <li class="postName" >标题：<span>{{artcle.title }}</span></li>
            
          </div>

          <div class="postInfo-state">
            
            <li class="postBiog">发布时间：<span>{{artcle.time }}</span></li>
          </div>

          <div class="postButton">
            <a-dropdown>
              <!-- <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">关闭评论</a-menu-item>
                  <a-menu-item key="2">打开评论</a-menu-item>
                </a-menu>
              </template> -->
              <!-- <a-button>
                操作
                <DownOutlined />
              </a-button> -->
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { defineComponent, reactive, toRefs,ref } from "vue";
//引入自定义封装的函数或对象
import { get, post, tip } from "@/common";  
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import {useRouter, useRoute} from "vue-router";
export default defineComponent({
  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },

  setup() {
    const router = useRouter(); 
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
    });

    const articleList=ref({});

    const handleClick = (menuInfo) => {
      console.log("click ", menuInfo);
    };
    const getarticleList=()=>{
  
      post("/post/selectuserarticle").then((res) => {
          articleList.value=res.data;
          console.log(articleList);
        

      })
    
    };
    getarticleList();

  const toDetail = (id) => {
    console.log(id)
      router.push({
        path: '/repost',
        query: {articleid:id}
      })
    };

    return { ...toRefs(state), handleClick ,articleList,getarticleList,toDetail,router};
  },
});
</script>


<style>
h3 {
  font-size: 24px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: 400;
  margin-top: 25px;
  text-align: left;
}

.postm {
  padding: 10px 10px 10px;
}

.postPhoto {
  width: 100px;
  height: 100px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postInfo {
  width: 300px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.postInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.postName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.postBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.postButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}
</style>



